<template>
  <layout :footer="false">
    <div class="product-list-container" v-loading="loading">
      <div class="banner">
        <el-image v-if="isPc" :src="require('@/assets/banner.png')" fit="cover"></el-image>
        <el-image v-else :src="require('@/assets/banner.png')" fit="cover" :style="{'height': bodyHeight + 'px'}"></el-image>
      </div>
      
      <!-- <div class="recommend" @mousewheel.prevent="mousewheel"> -->
      <div class="recommend" v-if="productData.recommendationData && productData.recommendationData.length">
        <Swiper :options="swiperOption" class="recommend-swiper">
          <SwiperSlide class="recommend-swiper-item" v-for="item in productData.recommendationData" :key="item.id">
            <div class="image" @click="handleClickRecommendItem(item)">
              <el-image fit="contain" :src="utils.setCdnUrl() + item.image + '?x-oss-process=image/resize,m_fill,h_240,w_240,limit_0'"></el-image>
            </div>
            <p class="text" @click="handleClickRecommendItem(item)">{{item.title}}</p>
          </SwiperSlide>
          <div class="swiper-scrollbar" slot="scrollbar"></div>
        </Swiper>
          <!-- <div class="recommend-swiper" ref="recommendSwiper" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart" @mousemove.prevent="touchmove" @mouseup.capture="touchend" @mouseleave="mouseleave1">
            <div class="recommend-swiper-item" v-for="item in productData.recommendationData" :key="item.id" @click="handleClickRecommendItem(item)">
              <div class="image">
                <el-image fit="contain" :src="utils.setCdnUrl() + item.image + '?x-oss-process=image/resize,m_mfit,h_240,w_240,limit_0'"></el-image>
              </div>
              <p class="text">{{item.title}}</p>
            </div>
          </div> -->
        <!-- <div class="recommend-swiper-container" @mouseleave="mouseleave" @mousemove.prevent="mousemoveBar" @mouseup="mouseupBar">
          <div class="recommend-swiper-scrollerbar" ref="scrollerWidth" @mousedown="mousedown">
            <div class="scroller-bar" ref="scrollerbar" :style="{'width': w, 'margin-left': x + 'px'}" @mousedown.stop="mousedownBar"></div>
          </div>
        </div> -->
      </div>

      <div class="nav" :class="{'fixed': isFixedNav}" ref="productNav">
        <div class="nav-innser">
          <i class="iconfont icon-arrow_1_1" @click="$router.back()"></i>
          <h4 class="title">{{first_type ? (second_type ? first_type + ' ' + second_type : first_type) : 'All'}}</h4>
          <i class="iconfont icon-Filter" @click="drawer = !drawer"></i>
          <ul class="menu">
            <li class="item" :class="{'active': !first_type}" @click="clickMenu()">All</li>
            <li class="item" :class="{'active': first_type === item.first_type}" @click="clickMenu(item.first_type)" v-for="item in menuData" :key="item.id">
              <span>{{item.first_type}}</span>
              <div class="item-list">
                <p v-for="val in item.second_type_list" :key="val.id" @click.stop="clickMenu(item.first_type, val.second_type)">{{val.second_type}}</p>
              </div>
            </li>
          </ul>
          <el-drawer
            :visible.sync="drawer"
            :show-close="true"
            :with-header="true"
            :wrapperClosable="true"
            :modal="false"
            size="100%">
            <el-menu
              class="product-menu"
              @select="handleSelect"
              @open="handleOpen">
              <el-menu-item index="all">All</el-menu-item>
              <template v-for="item in menuData">
                <template v-if="item.second_type_list.length">
                  <el-submenu :index="item.first_type" :key="item.id">
                    <template slot="title">
                      <span>{{item.first_type}}</span>
                    </template>
                    <template v-for="val in item.second_type_list">
                      <el-menu-item :index="val.second_type" :key="val.id">{{val.second_type}}</el-menu-item>
                    </template>
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="item.first_type" :key="item.id">{{item.first_type}}</el-menu-item>
                </template>
              </template>
            </el-menu>
          </el-drawer>
        </div>
      </div>
      <div class="list">
        <div class="empty" v-if="!productPageData.length">NO CONTENT</div>
        <el-row :gutter="36">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6"  class="item" v-for="item in productPageData" :key="item.id">
            <div class="image" @click="$router.push({path: '/product/' + item.set_link})" v-transition="{transform: 'translateY(50px)', delay: '.1s'}">
              <el-image fit="contain" :src="utils.setCdnUrl() + item.image + '?x-oss-process=image/resize,m_fill,h_378,w_378,limit_0'"></el-image>
            </div>
            <div class="text" v-transition="{transform: 'translateY(50px)', delay: '.1s'}">
              <span class="text_span">{{item.title}}</span>
            </div>
            <div class="action" v-transition="{transform: 'translateY(50px)', delay: '.1s'}">
              <el-button class="btn btn-buy" :disabled="!item.amazon_buy_link" :style="{'font-size': !item.amazon_buy_link ? '12px' : ''}" @click="openLink(item)">{{item.amazon_buy_link ? $t('DEFAULT.BUYONAMAZON') : 'Unavallable for your area'}}</el-button>
              <el-button class="btn btn-detail" type="text" @click="$router.push({path: '/product/' + item.set_link})">View details <i class="iconfont icon-leftarrow_normal"></i></el-button>
            </div>
          </el-col>
        </el-row>
        <div ref="infiniteScroll" class="infiniteScroll">
          <el-button v-if="page < pages" v-loading="loadMoreLoading">loading</el-button>
        </div>
      </div>
    </div>
    <FooterBar />
  </layout>
</template>

<script>
import { mapGetters } from 'vuex'
import Layout from '@/views/layout/index'
import { FooterBar } from '@/views/layout/components'
import { productList , productTabNav} from '@/api/product.js'
import { productAmazonButtonClickFunc } from '@/utils/kanban.js'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

import { isPc } from '@/utils/index.js'
const throttle = require('lodash/throttle')

export default {
  components: {
    Layout,
    FooterBar,
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      w: '',
      x: '0',
      page: 1,
      limit: 12,
      loadMoreLoading: false,
      drawer: false,
      loading: false,
      isFixedNav: false,
      first_type: '',
      second_type: '',
      tag_type: '',
      productData: '',
      menuData: [],
      swiperOption: {
        slidesPerView: 'auto',
        freeMode: true,
        centerInsufficientSlides: true,
        scrollbar: {
          el: '.swiper-scrollbar',
          draggable: true,
        },
      }
    }
  },
  computed: {
    ...mapGetters(['curSite']),
    total() {
      return this.productData && this.productData.list.length
    },
    pages() {
      return Math.ceil(this.total / this.limit)
    },
    productPageData() {
      return this.productData && this.productData.list.slice(0, this.limit * this.page)
    },
    productEl() {
      return this.$refs.productNav
    },
    bodyHeight() {
      return (document.documentElement.clientHeight || document.body.clientHeight) - 56
    },
    isPc() {
      return isPc()
    }
  },
  created() {
    this.getProductList()
    this.getProductTypeList()
  },
  mounted() {
    this.$nextTick(() => {
      // this.w = ((this.$refs.recommendSwiper.clientWidth / this.$refs.recommendSwiper.scrollWidth) * 100).toFixed(2) + '%'
      window.addEventListener('scroll', this.infiniteScroll)
    })
  },
  destroyed() {
    window.removeEventListener('scroll', this.infiniteScroll)
  },
  methods: {
    infiniteScroll() {
      // if(!this.__productElTop || this.productEl.offsetTop !== 0) {
      //   this.__productElTop = this.productEl.offsetTop
      // }
      // if(document.documentElement.scrollTop > this.__productElTop && this.__productElTop !== 0) {
      //   this.isFixedNav = true
      // } else {
      //   this.isFixedNav = false
      // }
      if((document.documentElement.scrollTop + window.innerHeight) >= this.$refs.infiniteScroll.offsetTop) {
        console.log(1)
        if(this.loadMoreLoading) return
        if(this.page < this.pages) {
          this.loadMoreLoading = true
          setTimeout(() => {
            this.page++
            this.loadMoreLoading = false
          }, 300)
        } else {
          this.loadMoreLoading = false
        }
      }
    },
    // 推荐产品滚动条开始拖动
    mousedown(event) {
      let x = event.pageX
      let left
      if(x > (this.$refs.scrollerbar.clientWidth + this.$refs.scrollerWidth.offsetLeft)) {
        left = x - (this.$refs.scrollerWidth.offsetLeft + this.$refs.scrollerbar.clientWidth)
      } else {
        left = x - this.$refs.scrollerWidth.offsetLeft
      }
      this.x = left
      let w = (left / (this.$refs.scrollerWidth.clientWidth - this.$refs.scrollerbar.clientWidth) * 100)
      this.scrollwidth = -(this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth) * w / 100
      this.$refs.recommendSwiper.style.transform = `translateX(${this.scrollwidth}px)`
    },
    mousedownBar(event) {
      this.$refs.scrollerbar.style.transition = 'none'
      this.__startx = event.pageX
      this.__m = true
    },
    setRecommendSwiper: throttle(function(res) {
      let w = (res / (this.$refs.scrollerWidth.clientWidth - this.$refs.scrollerbar.clientWidth) * 100)
      this.scrollwidth = -(this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth) * w / 100
      this.$refs.recommendSwiper.style.transform = `translateX(${this.scrollwidth}px)`
    }, 100),
    computedScroller(value) {
      let res
      if(value + this.$refs.scrollerbar.clientWidth >= this.$refs.scrollerWidth.clientWidth) {
        res = this.$refs.scrollerWidth.clientWidth - this.$refs.scrollerbar.clientWidth
      } else if(value <= 0) {
        res = 0
      } else {
        res = value
      }
      this.setRecommendSwiper(res)
      return res
    },
    // 推荐产品滚动条拖动
    mousemoveBar(event) {
      if(this.__m) {
        let x = event.pageX - this.__startx + (this.__endx || 0)
        this.x = this.computedScroller(x)
        // console.log(this.x)
      }
      
    },
    mouseupBar() {
      this.__m = false
      this.__endx = parseInt(this.x)
      this.$refs.scrollerbar.style.transition = 'all .2s'
    },
    mouseleave() {
      this.__m = false
      this.__endx = parseInt(this.x)
      this.$refs.scrollerbar.style.transition = 'all .2s'
    },
    mouseleave1() {
      this.__t = false
      this.__touchEndx = this.__touchX
    },
    mousewheel(event) {
      let delta = 0
      if (!event) event = window.event
      if (event.wheelDelta) { // IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
        delta = event.wheelDelta / 120
        if (window.opera) delta = -delta
      } else if (event.detail) {
        delta = -event.detail / 3
      }
      if(!this.scrollwidth) {
        this.scrollwidth = 0
      }
      if(delta < 0) {
        if(Math.abs(this.scrollwidth) >= this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth) {
          this.scrollwidth = -(this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth)
        } else {
          this.scrollwidth = this.scrollwidth - 272
        }
      } else {
        if(this.scrollwidth >= 0) {
          this.scrollwidth = 0
        } else {
          this.scrollwidth = this.scrollwidth + 272
        }
      }
      let b = (this.scrollwidth / (this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth)) * (this.$refs.scrollerWidth.clientWidth - this.$refs.scrollerbar.clientWidth)
      this.__endx = b
      this.x = -b
      this.$refs.recommendSwiper.style.transform = `translateX(${this.scrollwidth}px)`
    },
    touchstart(e) {
      this.__t = true
      if(e.type === 'touchstart') {
        this.__touchStartX = e.touches[0].pageX
      } else {
        this.__touchStartX = e.pageX
      }
      // console.log(event)
    },
    touchend() {
      this.__touchEndx = this.__touchX
      this.__t = false
      setTimeout(() => {
        this.__banClick = !this.__banClick
      }, 150)
    },
    setRecommendSwiperLeft: throttle(function(x) {
      this.$refs.recommendSwiper.style.transform = `translateX(${x}px)`
    }, 50, {leading: true, trailing: false}),
    touchmove(e) {
      // e.preventDefault();
      let moveEndX
      if(e.type === 'touchmove') {
        moveEndX = e.changedTouches[0].pageX
      } else {
        if(!this.__t) return
        moveEndX = e.pageX
      }
      this.__banClick = true
      this.__touchX = moveEndX - this.__touchStartX + (this.__touchEndx || 0)
      let x = 0
      if(this.__touchX > 0) {
        x = 0
        this.__touchX = 0
      } else if (Math.abs(this.__touchX) >= (this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth)) {
        x = -(this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth)
        this.__touchX = x
      } else {
        x = this.__touchX
      }
      this.setRecommendSwiperLeft(x)
      let b = (x / (this.$refs.recommendSwiper.scrollWidth - this.$refs.recommendSwiper.clientWidth)) * (this.$refs.scrollerWidth.clientWidth - this.$refs.scrollerbar.clientWidth)
      this.x = -b
    },
    handleClickRecommendItem(item) {
      if(!this.__banClick) {
        if(this.__t) return
        this.$router.push({path: '/product/' + item.set_link})
      }
    },
    handleOpen(value) {
      this.first_type = value
      this.second_type = null
    },
    handleSelect(value, arr) {
      if(value === 'all') {
        this.first_type = null
        this.second_type = null
      } else {
        this.first_type = arr[0]
        this.second_type = arr[1]
      }
      this.drawer = false
      this.getProductList()
    },
    clickMenu(first_type, second_type) {
      if(!first_type) {
        this.first_type = null
        this.second_type = null
      } else {
        this.first_type = first_type
        this.second_type = second_type
      }
      this.getProductList()
    },
    load() {
      console.log(1)
    },
    // 获取产品列表
    getProductList() {
      let params = {
        site_id: this.curSite.id,
        first_type: this.first_type,
        second_type: this.second_type,
        tag_type: this.tag_type,
      }
      this.loading = true 
      productList(params).then(res => {
        this.productData = res.data
        // setTimeout(() => {
        //   this.w = ((this.$refs.recommendSwiper.clientWidth / this.$refs.recommendSwiper.scrollWidth) * 100).toFixed(2) + '%'
        // }, 300)
      }).finally(() => {
        this.loading = false 
      })
    },

    // 获取产品分类类型
    getProductTypeList() {
      let site_id = this.curSite.id
      // if(!site_id) return
      let params = {
        site_id: site_id
      }
      productTabNav(params).then(res => {
        console.log(res)
        this.menuData = res.data
      })
    },

    openLink (item) {
      let link = item.amazon_buy_link
      if(!link) return
      if (link.indexOf('http')  == -1){
        link = 'http://' +link
      }
      productAmazonButtonClickFunc(item.title)
      window.open(link, '_blank')
    },
  }
}
</script>

<style lang="scss">
@media screen and (max-width: 768px) {
  .product-menu {
    .el-submenu__title {
      color: #191919;
      font-size: 14px;
      margin: 0 20px;
      padding: 0 !important;
      border-bottom: 1px solid #EAEAEA;
      &:hover {
        background: white;
      }
    }
    .el-menu--inline {
      .el-menu-item {
        padding-left: 20px !important;
      }
      .el-submenu {
        .el-submenu__title {
          padding-left: 20px !important;
        }
      }
    }

    .el-submenu.is-active .el-submenu__title {
      border-color: #EAEAEA;
    }

    .el-menu-item {
      position: relative;
      padding: 0 !important;
      margin: 0 20px;
      border-bottom: 1px solid #EAEAEA;
      &:hover {
        background: white;
        
      }
    }
  }
  .product-menu .el-submenu__icon-arrow.el-icon-arrow-down {
    font-family: 'iconfont' !important;
    font-size: 16px;
    color: #191919;
    &::before {
      content: '\e8e5';
    }
  }
  .product-menu .el-submenu.is-opened .el-submenu__icon-arrow.el-icon-arrow-down::before {
      content: '\e8e4';
  }
}
</style>

<style lang="scss" scoped>
  .product-list-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    .banner {
      order: 0;
      max-width: 100%;
      .el-image {
        width: 100%;
        height: calc(100vh - 64px);
      }
    }
    .recommend {
      margin-top: 40px;
      order: 1;
      position: relative;
      width: 100%;
      overflow: hidden;
      margin-bottom: 80px;
      .recommend-swiper {
        position: relative;
        display: flex;
        height: 328px;
        width: 100%;
        transform: translateX(0);
        transition: all .5s;
        // overflow: hidden;
        
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        margin-bottom: 0;
        padding: 0 24px;

        /deep/ .swiper-wrapper {
          // margin: 0 24px;
        }
        .swiper-scrollbar {
          height: 4px;
          background: #EAEAEA;
          width: 1200px;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
        /deep/ .swiper-scrollbar-drag {
          height: 4px;
          background-color: #6C7E59;
        }

      }
      .recommend-swiper-item {
        margin-right: 32px;
        width: 240px;
        height: 100%;
        cursor: pointer;

        &:last-child {
          margin-right: 0;
        }

        .image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 240px;
          height: 240px;
          overflow: hidden;

          .el-image {
            transition: all .3s;
            transform: scale(1);
          }

          &:hover {
            .el-image {
              transform: scale(1.2);
            }
          }
        }
        .text {
          margin-top: 12px;
          font-size: 14px;
          font-weight: 500;
          color: #191919;
          text-align: center;
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;  /*要显示的行数*/
          -webkit-box-orient: vertical;
        }
        &:hover {
          .text {
            color: #6C7E59;
          }
        }
      }
      .recommend-swiper-container {
        cursor: pointer;
        width: 1200px;
        margin: 0 auto;
        padding: 20px 0;
      }
      .recommend-swiper-scrollerbar {
        cursor: pointer;
        // margin: 20px 0;
        height: 4px;
        background-color: #EAEAEA;
        border-radius: 4px;

        .scroller-bar {
          transition: all .2s;
          width: 10%;
          height: 4px;
          background: #6C7E59;
          border-radius: 4px;
        }
      }
    }
    .nav {
      position: sticky;
      top: 0;
      order: 2;
      border-bottom: 1px solid #EAEAEA;
      height: 54px;
      z-index: 9;
      background: white;
      .nav-innser {
        display: flex;
        padding: 0 7.5%;
        justify-content: space-between;
        align-items: center;
        i {
          display: none;
          font-size: 20px;
        }
        .title {
          flex-grow: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .menu {
          list-style: none;
        }
        .item {
          height: 54px;
          cursor: pointer;
          position: relative;
          margin-left: 16px;
          float: left;
          padding: 17px 16px;
          font-size: 14px;
          color: #191919;

          .item-list {
            position: absolute;
            display: none;
            top: 54px;
            left: 0;
            z-index: 9;
            background: white;
            width: 100%;
            min-width: 192px;
            padding: 16px 0;
            background-color: #fff;
            box-shadow: 0 0px 8px 0px rgba(25, 25, 25, 0.08);
            border-radius: 0px 0px 8px 8px;
            transition: max-height .4s ease-in-out;

            p {
              padding: 17px 16px;
              font-size: 14px;
              color: #191919;
              font-weight: normal;

              &:hover {
                color: #6C7E59;
                background-color: rgba(236, 237, 234, 0.4);
              }
            }
          }
          &:hover {
            color: #6C7E59;
            border-bottom: 2px solid #6C7E59;
            .item-list {
              display: block;
            }
          }
        }
        .item.active {
          font-weight: bold;
          color: #6C7E59;
          border-bottom: 2px solid #6C7E59;
        }
      }
    }
    .nav.fixed {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      background: white;
      margin: 0;
    }
    .list {
      order: 3;
      padding: 0 7.5%;
      margin-top: 32px;
      margin-bottom: 16px;
      .empty {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 56px;
        padding: 100px 0;
        color: #ccc;
      }
      .el-row {
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        display: flex;
        flex-direction: column;
        margin-bottom: 48px;
        cursor: pointer;
        &:hover {
          .text {
            color: #6C7E59;
          }
        }
        .image {
          width: 100%;
          background-color: #FAFAFA;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;

          .el-image {
            // max-height: 100%;
            border-radius: 16px;
            width: 100%;
            transition: all .4s;
          }

          &:hover {
            .el-image {
              transform: scale(1.2);
            }
          }
        }
        .text {
          padding: 16px 0;
          height: 84px;
          overflow: hidden;
          
          .text_span {
            font-size: 18px;
            font-weight: 500;
            color: #191919;
            line-height: 26px;
            display: inline-block;
            overflow: hidden;
            display: -webkit-box;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;  /*要显示的行数*/
            -webkit-box-orient: vertical;
          }
        }
        .action {
          .btn {
            padding: 0 24px;
            height: 48px;
            font-size: 14px;
          }
          .btn-buy {
            background: #6C7E59;
            color: #FFFFFF;
            border: none;

            &:hover {
              background: #A5AF99;
              border-color: #A5AF99;
            }
          }
          .btn-buy.is-disabled {
            background: #DEE0DB;
            cursor: not-allowed;
            border: none;
          }
          
          .btn-detail {
            border: 0;
            color: #191919;
            i {
              display: inline-block;
              transition: transform .2s ease-out;
              transform: translateX(2px);
            }
            &:hover {
              color: #6C7E59;

              i {
                transform: translateX(8px);
              }
            }
          }
        }
      }
      .infiniteScroll {
        display: flex;
        justify-content: center;

        .el-button {
          border: 0;
        }
      }
    }
  }
  @media screen and (max-width: 1400px) {
    .product-list-container {
      .list {
        .item {
          .action {
            display: flex;
            justify-content: center;
            .btn-detail {
              display: none;
            }
          }
        }
      }
    } 
  }
  @media screen and (max-width: 768px) {
    .product-list-container {
      padding-top: 56px;
      .banner {
        max-width: auto;
        width: 100%;
        // height: calc(100vh - 56px);
        overflow: hidden;
        .el-image {
          // height: 100vh;
          width: auto;

          /deep/ .el-image__inner {
            width: auto;
            margin-left: -50%;
            transform: translateX(25%);
          }
        }
      }
      .recommend {
        margin-top: 24px;
        margin-bottom: 0;
        order: 1;
        .recommend-swiper {
          margin-bottom: 0;
          height: 210px;

          .swiper-scrollbar {
            width: 100%;
            height: 2px;

            /deep/ .swiper-scrollbar-drag {
              height: 2px;
            }
          }
        }
        .recommend-swiper-item {
          width: 144px;
          margin-right: 16px;

          .image {
            width: 144px;
            height: 144px;
            transform: scale(1);

            &:hover {
              .el-image {
                transform: scale(1);
              }
            }
          }
          &:hover {
            .text {
              color: #191919;
            }
          }
        }
        .recommend-swiper-container {
          padding: 16px 0;
          width: 100%;
        }
      }
      .nav {
        top: 56px;
        order: 2;
        margin: 20px 0 0 0;
        /deep/ .el-drawer__wrapper {
          top: 56px;
          z-index: 9 !important;
        }
        /deep/ .el-drawer__header {
          margin-bottom: 0;
          padding: 17px 20px;
          border-bottom: 1px solid #EAEAEA;

          .el-dialog__close {
            font-size: 24px;
            color: #191919;
          }
        }
        /deep/ .el-submenu__icon-arrow {
          right: 10px;
        }
        .nav-innser {
          height: 56px;
          padding: 0 20px;
          // justify-content: ;
          i {
            display: block;
          }
          .title {
            padding-left: 10px;
          }
          .menu {
            display: none;
          }
        }
      }
      .list {
        margin-top: 24px;
        .item {
          margin-bottom: 40px;
          .text {
            padding: 12px 0;
            text-align: center;
            height: auto;
          }
          &:hover {
            .text {
              color: #191919;
            }
          }
          .image {
            .el-image {
              // max-height: 100%;
              border-radius: 16px;
              width: 100%;
              transition: none;
            }

            &:hover {
              .el-image {
                transform: scale(1);
              }
            }
          }
        }
        .action {
          display: flex;
          justify-content: center;
          .btn-detail {
            display: none;
          }
        }
      }
    }
  }
</style>